<template>
    <div class="left-nav">
        <el-menu
                :default-active="$route.path"
                class="el-menu-vertical-demo"
                menu-trigger="true"
                :style={height:leftHeight}
                unique-opened
                router>
            <template v-for="item,index in TreeData">
                <el-menu-item v-if="!item.child" test="1" :index="item.url">
                    <i class="fa icon" :class=item.icon></i>
                    <span>{{item.name}}</span>
                </el-menu-item>
                <el-submenu :index="(index+1).toString()"  v-if="item.child">
                    <template slot="title">
                        <i class="fa icon" :class=item.icon></i>
                        <span>{{item.name}}</span>
                    </template>
                    <el-menu-item-group v-if="item.child" v-for="childItem in item.child">
                        <el-menu-item :index="childItem.url">{{childItem.name}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </template>
            <!--<el-submenu index="1">-->
                <!--<template slot="title">-->
                    <!--<i class="el-icon-news"></i>-->
                    <!--<span>任务管理</span>-->
                <!--</template>-->
                <!--<el-menu-item-group>-->
                    <!--<el-menu-item index="/mission/list">任务列表</el-menu-item>-->
                    <!--&lt;!&ndash;<el-menu-item index="/feature/spot">景点列表</el-menu-item>&ndash;&gt;-->
                <!--</el-menu-item-group>-->
            <!--</el-submenu>-->
        </el-menu>
    </div>

</template>

<script>
    export default {
        name: 'leftNav',
        data() {
            return {
                leftHeight: '',
                TreeData: []
            }
        },
        filters: {
            toJson: function (tab) {
                return JSON.stringify(tab);
            }
        },
        created() {
            this.getTreeList();
        },
        mounted() {
            this.leftHeight = (document.documentElement.clientHeight - 65) + 'px';
        },
        methods: {
            getTreeList() {
                this.$http.get('api/admin/auth/navTree')
                    .then((result) => {
                        this.TreeData = result.data;
                    })
                    .catch((err) => {
                        this.$message.warning(err.data.msg || "数据异常，请重试");
                    })
            }
        }
    };
</script>

<style scoped>
    a {
        text-decoraction: none;
    }
</style>